<template>
  <view v-if="template">
    <s-layout
      title="首页"
      navbar="custom"
      tabbar="/pages/index/index"
      :bgStyle="template.style?.background"
	  :navbarStyle="template.style?.navbar"
    >
		<view class="body-content">
			<view class="index-icon"
				@click="goPath(item.path)"
				v-for="(item, index) in iconList" 
				:key="index"
				:style="[{
					left: item.postion.left+ 'rpx',
					top: item.postion.top+ 'rpx',
					width: item.postion.width + 'rpx',
				}]"
			>
				<image 
					:style="[{width: item.postion.width + 'rpx', height: item.postion.height + 'rpx'}]" 
					:src="`/static/index/${item.icon}@2x.png`"
				></image>
				<view class="index-icon-text">{{item.title}}</view>
			</view>
		</view>
		
		<!-- 广告模块 -->
		<s-popup-image />
    </s-layout>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
  
  import { useI18n } from 'vue-i18n'
  const { t }  = useI18n()

	const iconList = ref([
		{icon: '1', title: '砸金蛋', path: '/pages/user/go-golden/go-golden', postion: {left: 558, top: 90, width: 116, height: 116}},
		{icon: '2', title: '商品', path: '/pages/goods/list', postion: {left: 62, top: 200, width: 194, height: 130}},
		{icon: '4', title: '金钥匙', path: '/pages/financial/list', postion: {left: 55, top: 546, width: 100, height: 100}},
		{icon: '3', title: '金店', path: '/pages/goods/store', postion: {left: 186, top: 600, width: 390, height: 270}},
		{icon: '6', title: '分享码', path: 'showShareModal', postion: {left: 530, top: 904, width: 156, height: 156}},
		{icon: '5', title: '个人中心', path: '/pages/index/user', postion: {left: -90, top: 990, width: 336, height: 170}},
		{icon: '7', postion: {left: 616, top: 1236, width: 96, height: 96}},
		{icon: '8', postion: {left: 280, top: 1314, width: 238, height: 120}},
	])
  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);

  onLoad((options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
  
  
  const userInfo = computed(() => sheep.$store('user').userInfo);
  function goPath(path) {
	  sheep.$router.go(path)
	  if(path === 'showShareModal') {
		  console.log(userInfo)
		  if(userInfo.value.is_qrcode == 0) {
			  sheep.$helper.toast('未消费不可推广');
			  return
		  }
		  showShareModal()
	  }else {
		  sheep.$router.go(path)
	  }
  }
</script>

<style lang="scss" scoped>
	::v-deep {
		// .page-body{
		// 	background: linear-gradient( 180deg, #002C9B 0%, #356DDC 69%, #4A84F2 100%);
		// }
	}
	
	.body-content {
		min-height: 1500rpx;
		
		.index-icon {
			position: absolute;
			z-index: 9;
			animation: myBreath 3s linear infinite;
		}
		.index-icon-text {
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			margin-top: 5rpx;
		}
	}
	
	@keyframes myBreath {
		0%{
			transform: scale(0.88);
		  }
		50%{
			transform: scale(1);
		  }
		 100%{
			transform: scale(0.88);
		  }
	 }
</style>
